<template>
  <div id="app">
    <el-container>
      <el-header style="font-size: 20px;background-color:#e3e4e5" class="header_title">
        <div class="goshoppingcity" @click="goCity">商城首页</div>
        <div>
          <el-dropdown>
            <i class="el-icon-user-solid" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-button @click="drawer = true" type="text" style="color: #000"
                >个人资料</el-button
              >
            </el-dropdown-menu>
          </el-dropdown>

          <el-button type="text" style="color: #000">我的订单</el-button>
          <el-button type="text" style="color: #000">欢迎登录</el-button>
        </div>
      </el-header>

      <el-main>
        <div>
          <div class="cart">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>

              <el-table-column width="150" align="center">
                <div class="demo-image__placeholder">
                  <div class="block">
                    <el-image :src="src">
                      <div slot="placeholder" class="image-slot"></div>
                    </el-image>
                  </div>
                </div>
              </el-table-column>

              <el-table-column
                prop="name"
                label="商品名称"
                width="200"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="price"
                label="单价"
                align="center"
              ></el-table-column>

              <el-table-column label="数量" align="center">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.number"
                    :min="1"
                    :max="100"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="total_warpper">
              <h3>共购买{{ totalNumber }}件商品</h3>
              <h3>合计(不含运费)：{{ totalPrice }}</h3>
            </div>
            <div style="margin-left: 900px">
              <el-button>购物车结算</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

     

  
<script>
export default {
  name: "app",
  component: {},
  data () {
    return {
      editIsDialog: false, //编辑弹窗
      addIsDialog: false, //添加弹窗
      multipleSelection: [], //存放已选择的数据
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      formData: {
        name: "",
        price: "",
        number: "",
      },
      editData: {},
      formLabelWidth: "200",
      //表格中的数据
      tableData: [
        {
          name: "《盗墓笔记》",
          price: 30,
          number: 1,
        },
        {
          name: "《全职高手》",
          price: 30,
          number: 1,
        },
        {
          name: "《龙族》",
          price: 30,
          number: 1,
        },
        {
          name: "《哑舍》",
          price: 30,
          number: 1,
        },
      ],
    };
  },
  methods: {
    // 点击发生的变化
    handleSelectionChange (val) {
      this.multipleSelection = val; //给定义的数组赋值
    },
    handleDelete (index) {
      this.tableData.splice(index, 1); //删除表格的数据
    },
    // 回首页
    goCity(){
        this.$router.push("/")
    },
  },
  // 通过computed计算属性及时改变
  computed: {
    // 总价
    totalPrice () {
      var price_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        price_total +=
          this.multipleSelection[i].price * this.multipleSelection[i].number;
      }
      return price_total;
    },
    // 总数
    totalNumber () {
      var number_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        number_total += this.multipleSelection[i].number;
      }
      return number_total;
    },
  },
  components: {},
};
</script>
 
<style scoped>

/* 商场首页 */
.goshoppingcity{
    cursor: pointer;
}
.el-header {
  background-color: #8ca8cc;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.header_title {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
}
.sub-title {
  line-height: 60px;
}

.el-main {
  height: calc(100vh - 90px);
}

.cart {
  margin: 50px auto;
  width: 1000px;
  border-radius: 30px;
}
.group_btn {
  margin-bottom: 30px;
}
.addDialog .el-input {
  width: 90%;
}
.total_warpper {
  text-align: right;
  margin-top: 30px;
}
h3 {
  margin-top: 10px;
}
</style> 

<style scoped>
.cart .el-table td,
.cart .el-table th.is-leaf,
.cart .el-table--border,
.cart .el-table--group {
  border: none;
  cursor: pointer;
}
.cart .el-table::before {
  height: 0;
}
</style>